<template>
  <div class="page">
    <uni-notice-bar class="notice" show-icon text="请认真填写居民信息采集表( * 为必填项)" />

    <div class="form">
      <uni-forms ref="formRef" :modelValue="formData" label-width="100px">
        <FormGroup v-model="formData" :json="formJson"></FormGroup>
      </uni-forms>
    </div>
    <div class="footer">
      <a class="btn-submit" @click="handleSubmit">提交</a>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import FormGroup from '@/jax/components/FormGroup.vue'
import district from '@/data/district.json'

const required = true

const formRef = ref()
const formData = reactive({})
const formJson = reactive([
  {
    name: 'radio',
    label: 'radio',
    required,
    type: 'radio',
    options: [
      { label: 'test1', value: '是' },
      { label: 'test2', value: '否' },
    ],
  },

  { label: '文本框2', name: 'aa', required: true },
  {
    name: 'yhzgx',
    label: 'select',
    required,
    type: 'select',
    options: [
      { label: '户主', value: '户主' },
      { label: '配偶', value: '配偶' },
      { label: '之子', value: '之子' },
      { label: '之女', value: '之女' },
      { label: '之孙子', value: '之孙子' },
      { label: '之孙女', value: '之孙女' },
      { label: '之外甥', value: '之外甥' },
      { label: '之外甥女', value: '之外甥女' },
      { label: '之外孙子', value: '之外孙子' },
      { label: '之外孙女', value: '之外孙女' },
      { label: '之儿媳', value: '之儿媳' },
      { label: '之女婿', value: '之女婿' },
      { label: '之父', value: '之父' },
      { label: '之母', value: '之母' },
      { label: '之公公', value: '之公公' },
      { label: '之婆婆', value: '之婆婆' },
      { label: '之岳父', value: '之岳父' },
      { label: '之岳母', value: '之岳母' },
      { label: '之祖父', value: '之祖父' },
      { label: '之祖母', value: '之祖母' },
      { label: '之外祖父', value: '之外祖父' },
      { label: '之外祖母', value: '之外祖母' },
      { label: '之曾孙', value: '之曾孙' },
      { label: '之曾孙女', value: '之曾孙女' },
      { label: '之兄弟', value: '之兄弟' },
      { label: '之兄妹', value: '之兄妹' },
      { label: '之姐弟', value: '之姐弟' },
      { label: '之姐妹', value: '之姐妹' },
      { label: '之侄子', value: '之侄子' },
      { label: '之侄女', value: '之侄女' },
      { label: '其他', value: '其他' },
    ],
  },
  { name: 'hjaddress', label: 'address', required, type: 'data-picker', options: district },
])

const handleSubmit = () => {
  formRef.value.validate().then(res => {
    console.log('提交成功')
  })
}
</script>
<style lang="scss" scoped>
.page {
  background-color: #f7f8fa;
  height: 100vh;
}

.notice {
  margin-bottom: 0;
}

.form {
  background-color: #fff;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 6px 10px;
}

.btn-submit {
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  background-color: var(--primary);
  width: 100%;
  display: block;
  color: #fff;
}
</style>
